<template>
  <el-carousel height="170px" direction="vertical" :autoplay="true" indicator-position="none"
    style="border: 1px solid #ebeef5; border-radius: 4px;box-shadow: var(--el-box-shadow-lighter);">
    <el-carousel-item v-for="(item, index) in carouselItems" :key="index" class="carousel-item">
      <el-card class="carousel-card">
        <template #header>
          <div class="card-header">
            {{ item.title }}
          </div>
        </template>
        <el-scrollbar max-height="110px" class="card-scrollbar">
          <div class="card-content">
            <div v-for="(content, contentIndex) in item.content" :key="contentIndex" class="content-item">
              {{ content }}
            </div>
          </div>
        </el-scrollbar>
      </el-card>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
const carouselItems = [
  {
    title: '操作指南',
    content: [
      '1. 用户发起回收申请',
      '2. 管理员审核通过后，回收员上门回收同时计算收益',
      '3. 回收员回收至机构，由管理员审核通过，将垃圾交由操作员进行处理同时汇款给用户',
      '4. 操作员处理并记录垃圾信息',
    ],
  },
  {
    title: '用户收益计算',
    content: [
      '1. 盈利类（回收价 > 处理价）：',
      '   用户收益 = 市场价 × 重量 + (回收价 - 处理价) × 重量 × 用户分成比 + 碳补贴 × 重量',
      '2. 补贴类（回收价 ≤ 处理价）：',
      '   用户收益 = 市场价 × 重量 + 政府补贴 × 重量 × 用户分成比 + 碳补贴 × 重量',
      '',
      '注：环保评级奖励 = 基础环保奖励（50元/吨） × env_rating × 重量',
    ],
  },
  {
    title: '机构收益计算',
    content: [
      '1. 盈利类（回收价 > 处理价）：',
      '   机构收益 = (回收价 - 处理价) × 重量 × 机构分成比 + 环保评级奖励',
      '2. 补贴类（回收价 ≤ 处理价）：',
      '   机构收益 = 政府补贴 × 重量 × 机构分成比 + (回收价 + 政府补贴 - 处理价) × 重量 + 环保评级奖励',
      '',
      '注：环保评级奖励 = 基础环保奖励（50元/吨） × env_rating × 重量',
    ],
  },
];
</script>

<style scoped>
/* 新增或修改以下样式 */
.carousel-card {
  height: 100%;
  box-shadow: none !important;
  border: none;
  /* 确保卡片内部布局 */
  display: flex;
  flex-direction: column;
}

.el-card :deep(.el-card__body) {
  padding: 5px 20px;
}

.card-scrollbar {
  /* 动态计算高度：总高度170px - 头部高度(约40px) - 上下padding各10px */
  height: calc(170px - 40px - 20px);
  flex: 1;
  min-height: 0;
  /* 允许内容收缩 */
}

.card-content {
  /* 移除min-height限制 */
  line-height: 1.3;
  font-size: 14px;
  color: #606266;
  padding-bottom: 2px;
  /* 防止边缘被裁剪 */
}

.content-item {
  margin-bottom: 8px;
  /* 减少间距 */
}
</style>